<template>
  <div class="projectList">
    <div
      class="projectItem"
      v-for="item in subApplicationList"
      :key="item.id"
      @click="navigateTo(item.path)"
    >
      <div class="image">
        <el-image
          style="width: 100px; height: 100px"
          :src="item.image"
          fit="cover"
        />
      </div>
      <div class="info">
        <div class="name">{{ item.name }}</div>
        <div class="description">{{ item.description }}</div>
      </div>
    </div>
  </div>
</template>

<script lang="tsx" setup>
import { useRouter } from 'vue-router'

const router = useRouter()

// 路由跳转
// 路由跳转
const navigateTo = (path: string) => router.push(path)

interface SubApplicationItem {
  id: string
  path: string
  name: string
  description: string
  image: string
}

const subApplicationList: SubApplicationItem[] = [
  {
    id: 'AIAccount',
    path: '/aiAccount',
    name: '智能账本',
    description: '智能账本',
    image:
      'https://cube.elemecdn.com/6/94/4d3ea53c084bad6931a56d5158a48jpeg.jpeg',
  },
  {
    id: 'LogManage',
    path: '/logManage',
    name: '系统日志',
    description: '系统日志',
    image:
      'https://fuss10.elemecdn.com/a/3f/3302e58f9a181d2509f3dc0fa68b0jpeg.jpeg',
  },
]
</script>

<style lang="less" scoped>
.projectList {
  display: flex;
  flex-wrap: wrap;

  > .projectItem {
    display: flex;
    padding: 10px;
    margin: 10px;
    height: 100px;
    width: 330px;
    transition: 0.5s;
    user-select: none;

    &:hover {
      transition: 0.5s;
      box-shadow: 0 0 1px 2px #e4e4e4;
      border-radius: 3px;
    }

    > .image {
      height: 100px;
      width: 100px;
      margin-right: 10px;
      background-color: #ececec;
    }

    > .info {
      height: 100px;
      width: 220px;

      > .name {
        height: 35px;
        display: flex;
        align-items: center;
        font-size: 17px;
        color: #606266;
        font-weight: bold;
      }

      > .description {
        height: 65px;
        color: #918f8f;
      }
    }
  }
}
</style>
